<template>
    <div id="courseAnalysisChart" :style="{ width: props.width, height: props.height }"></div>
</template>

<script setup lang="ts">
import { GetMergedCourseId, GetMergedCourseName } from '@/controllers/courseController';
import { message } from '@/utils/message';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

let courseNameList: string[]
const props = defineProps<{ width: string, height: string }>()
let goodList: number[] = [], normalList: number[] = [], badList: number[] = []
let test: number[] = []
onMounted(async () => {
    try {
        await getMergedCourseName()
        await dataSort()
        drawChart()
    } catch (error) {
        console.error(error)
    }
});
async function getMergedCourseName() {
    try {
        courseNameList = await GetMergedCourseName()
    } catch (error: any) {
        console.log(error.message, 'error')
    }
}
async function dataSort()
{
    try {
        const data = await GetMergedCourseId()
        goodList = data.goodList
        for (let i = 0; i < goodList.length; i++) {
            test[i] = goodList[i];
        }
        normalList = data.normalList
        badList = data.badList
        console.log(goodList[0])
    } catch (error:any) {
        message(error.message, 'error')
    }
}
async function drawChart() {
    const c = document.getElementById('courseAnalysisChart')
    if (!c) {
        console.error('元素不存在！')
        return
    }
    const chart = echarts.init(c);
    const option: echarts.EChartsOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: courseNameList
        },
        series: [
            {
                name: '优秀',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: test
            },
            {
                name: '合格',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: normalList
            },
            {
                name: '不及格',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: badList
            }
        ]
    };
    option && chart.setOption(option);
}
</script>